<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      *{
        margin:0;
        padding:0;
      }
      body {
          padding-top: 1.5rem;
          border:0;

      }
      .all{
        width: 100%;
        height: 100%;
        position: fixed;
      }
      .all_img{
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      .all_img img{
        width: 100%;
        height: 100%;


      }
      .fl{
        float: left;
      }
      .fr{
        float: right;
      }
      .header{
        width: 93%;
        height:2.5rem;
        padding:0.5rem 0.8rem;
        z-index: 999;
        position: absolute;
        top:1.5rem;
        /*border: 0.1rem solid red;*/

      }
      .header_left{
        width:auto;
        height: 2.3rem;
        background-color:rgba(0,0,0,0.4);
        padding: 0.2rem 0.2rem;;
        border-radius: 2rem;

      }
      .left_img{
        width: 2.2rem;
        height: 2.2rem;
      border-radius:50%;

       overflow:hidden;
      }
      .left_img img{
        width: 100%;
        height: 100%;
      }
      .left_p{
        color: #fff;
        width: auto;
        font-size: 0.8rem;
        margin-top: 0.3rem;
        margin-left: 0.2rem;
      }
      .left_gz{
        width: auto;
        height: 1.7rem;
        color: #fff;
        background-color: #40cccc;
        line-height: 1.7rem;
        padding: 0rem 0.6rem;
        border-radius: 1rem;
        font-size: 0.9rem;
        margin-top: 0.3rem;
          margin-left: 0.2rem;
      }
      .header_right{
        width: auto;
        margin-top: 0.2rem;
        overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    flex-wrap: nowrap;

      }
      .right_img{
        width: 2.2rem;
        height: 2.2rem;
      border-radius:50%;
      overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

         margin-left: 0.2rem;
      }
      .right_img img{
        width: 100%;
        height: 100%;
      }
      .heaght_c{
        width: auto;
        height: auto;
        background-color: #fff;
        z-index: 999;
        border-radius: 50%;
        padding: 0rem;
        position: fixed;
        top:2.2rem;
        right: 0.8rem;
      }
      .c_img{
        width: 2rem;
        height: 2rem;
      }
      .c_img img{
        width: 100%;
        height: 100%;
      }
      .time{
        position: relative;
        right:0.8rem;
        top:3.5rem;
        width: auto;
      }
      .time p{
        background-color: rgba(0,0,0,0.4);
        color: #fff;
        font-size: 0.7rem;
        border-radius: 1rem;
        margin-top: 0.3rem;
        padding: 0.2rem 0.1rem;
      }
      .nav{
        position: absolute;
        left:0.8rem;
        top:5.2rem;
      }
      .one{
        width: auto;
        height: auto;
        /*margin-top: 0.5rem;*/
      }
      .nav_one{
        width: 100%;
        height: 7.5rem;
      }
      .nav_one img{
        width: 100%;
        height: 100%;
      }
      .one_cuo{
        width: 1.2rem;
        height: 1.2rem;
        position: relative;
        bottom:7.5rem;
        left:75%;
        z-index: 999;
      }
      .one_cuo img{
        width: 100%;
        height: 100%;
      }
      .nav_p{
        width: 100%;
        height: 1.5rem;
        color: #fff;
        background-color: rgba(0,0,0,0.4);
        line-height: 1.5rem;
        font-size: 0.9rem;
        text-align: center;
        position: relative;
        bottom: 2.7rem;
      }
      .cont_txt{
        width: 80%;
        max-height: 20rem;
        min-height: 0rem;
        overflow: auto;
        z-index: 999;
        position: absolute;
        bottom:3.5rem;
        left:0.8rem;
      }
      .text{
        width: auto;
        height: auto;


      }
      .text_p{
        width:auto;
        white-space:wrap;
        margin-right: 1rem;
        padding: 0.4rem;
        border-radius: 0.7rem;
        color: #fff;
        background-color: rgba(0,0,0,0.15);
        margin-top: 0.5rem;
        font-size: 0.9rem;

      }
      .span{
        color: #40cccc;
        display: inline;
      }
      .span1{
        color: yellow;
        display: inline;
      }
      .span_img{
        width: 1rem;
        height: 1rem;
      }
      .span_img img{
        width: 100%;
        height: 100%;
      }
      .footer{
        width: 93%;
        position: absolute;
        bottom:0.5rem;
        left:0.8rem;
        z-index: 999;
      }
      .input{
        width: 75%;
        height: 2rem;
        background:none;
        background-color:rgba(243,243,243,0.5);

         outline:none;
         border:1px solid #ccc;
         border-radius: 1rem;
        padding: 0.3rem;
      }
      .footer_r{
        width: 20%;
        height: 2.5rem;
        border-radius: 0.5rem;
        background-color: #40cccc;
        color: #fff;
        text-align: center;
        margin-top: 0.1rem;
        line-height: 2.5rem;
      }
      </style>
  </head>
  <body>
  <div class="all">
    <div class="all_img">
      <img src="../image/a22.png" alt="">
    </div>

  </div>
  <div class="header">
      <div class="header_left fl">
          <div class="left_img fl">
            <img src="../image/45.png" alt="">
          </div>
          <div class="left_p fl">
            <p>赵老师</p>
            <p>999+人</p>
          </div>
          <div class="left_gz fl">
            关注
          </div>
      </div>
      <div class="header_right">
        <div class="right_img fl">
          <img src="../image/45.png" alt="">
        </div>
        <div class="right_img fl">
          <img src="../image/45.png" alt="">
        </div>

        <div class="right_img fl">
          <img src="../image/45.png" alt="">
        </div>
        <div class="right_img fl">
          <img src="../image/45.png" alt="">
        </div>


      </div>
      <div class="heaght_c fr">
        <div class="c_img">
          <img src="../image/cuo.png" alt="">
        </div>
      </div>
  </div>
  <div class="nav fl">
    <div class="one">
      <div class="nav_one">
        <img src="../image/u64.png" alt="">
      </div>
      <div class="one_cuo">
        <img src="../image/cuo_1.png" alt="">
      </div>
      <p class="nav_p">叶男</p>
    </div>
  </div>
  <div class="time fr">
    <p>时长：60分钟</p>
    <p>计时：10:21:19</p>
  </div>
  <div class="cont_txt">
    <div class="text">
      <p class="text_p fl">系统消息：<span class="span">您现在正在收看“岳立欣”开启的"数学"学习之旅，分享直播会有意向不到的惊喜哦！</span></p>
      <p class="text_p fl">直播消息：<span class="span">王赫关注了老师，不错过下一次直播</span></p>
      <p class="text_p fl"><span class="span1">叶晓晨</span> 老师你这一节课，讲的三角函数，正是我明天要考试的哈哈哈</p>
      <p class="text_p fl"><span class="span1">叶晓晨</span> <span class="span">进入直播间</span></p>
      <p class="text_p fl">系统消息：<span class="span">您现在正在收看“岳立欣”开启的"数学"学习之旅，分享直播会有意向不到的惊喜哦！</span></p>
      <p class="text_p fl">直播消息：<span class="span">王赫关注了老师，不错过下一次直播</span></p>
      <p class="text_p fl"><span class="span1">叶晓晨</span> 老师你这一节课，讲的三角函数，正是我明天要考试的哈哈哈</p>
      <p class="text_p fl"><span class="span1">叶晓晨</span> <span class="span">进入直播间</span></p></r>
      <p class="text_p fl">99+条新消息：<span class="span_img fr"><img src="../image/down.png" alt=""></span></p>




    </div>
  </div>
  <div class="footer">
    <input type="text" name="" value="" class="fl input">
    <p class="footer_r fr">发送</p>
  </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
  <script type="text/javascript">
      var id
      apiready = function(){
        id = api.pageParam.id
        var qiniuLive = api.require('qiniuLive');
        qiniuLive.initStreamingEnv(function(ret){
            alert(JSON.stringify(ret));
        });
      };
  </script>
  </html>
